<template>
  <TableView
    ref="tableView"
    :table-attrs="{ api: getPage, descs: ['createTime'], payloadStyle: 'body' }"
    :form-path="formPath"
    :search-model="searchForm"
    :delete-api="batchDelete"
    :toolbar-attrs="{ buttons: ['slot', 'del', 'create'] }">
    <template #toolbar-button>
      <UploadButton
        btn-style="button"
        :auto-fetch="false"
        :before-upload="beforeUpload"
        :action="`${services.personnelService}book/importData`"
        icon="el-icon-upload"
        type="primary"
        label="上传"
        @on-success="onSuccess"
        @on-complete="onComplete">
        <template #button>
          <ToolbarButton icon="el-icon-upload" type="primary" label="导入" />
        </template>
      </UploadButton>
    </template>
    <template #columns>
      <TableColumn label="图书编号" prop="bookNumber" />
      <TableColumn label="图书编码" prop="bookCode" />
      <TableColumn label="图书名称" clickable prop="name" />
      <TableColumn label="作者" prop="author" />
      <TableColumn label="出版日期" prop="publishDate" />
      <TableColumn label="编录号" prop="catalogCode" />
      <TableColumn label="数量" prop="amount" />
    </template>
    <template #search-form>
      <FormInput v-model="searchForm.name" prop="name" label="图书名称" />
      <FormInput v-model="searchForm.author" prop="author" label="作者" />
    </template>
  </TableView>
</template>

<script>
  import { services } from '@/config'
  import { groupPage as getPage, batchDelete } from './api'

  export default {
    name: 'BookView',
    data() {
      return {
        services,
        searchForm: {
          name: '',
          author: ''
        }
      }
    },
    methods: {
      getPage,
      batchDelete,
      beforeUpload() {
        this.loading = this.$loading({ text: '处理中,请稍等...' })
      },
      onSuccess() {
        this.$message.success('导入完成!')
      },
      onComplete() {
        this.loading?.close()
        this.$refs.tableView.reloadTable()
      },
      formPath(row) {
        return row?.amount > 1 ? '/library/book/BookGroupForm/{id:-1}' : '/library/book/BookForm/{id:-1}'
      }
    }
  }
</script>
